<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="葵语主页,葵语的主页,lsaiah,Lsaiah,葵语の主页,葵语小站,测试开发,二次元">
	<meta name="description" content="欢迎来到葵语小站！本站记录学习，分享乐趣">
	<meta property="og:title" content="葵语的主页"/>
    <meta property="og:author" content="葵语-Lsaiah"/>
    <meta property="og:image" content="https://cdn.jsdelivr.net/gh/Kwaiyu/BlogAssets@latest/usr/uploads/avatar.jpg"/>
    <meta property="og:site_name" content="葵语小站">
    <meta property="og:description" content="欢迎来到葵语小站！本站记录学习，分享乐趣"/>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
	<title>Google Search</title>
    <link rel="stylesheet" href="styles.css">
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <div id="search">
        <input id="search-field" type="text" name="search-field" onkeypress="return search(event)"/>
    </div>
    <div class="container">
        <div id="clock"></div>
        <div class="weather-container">
            <div class="row">
				<div id="location" class="inline"></div>
				<div class="inline"> - </div>
                <div id="weather-description" class="inline"></div>
                <div class="inline"> - </div>
                <div id="temp" class="inline"></div>
            </div>
        </div>
    <script>
        // Search on enter key event
        function search(e) {
            if (e.keyCode == 13) {
                var val = document.getElementById("search-field").value;
                window.open("https://google.com/search?q=" + val);
            }
        }
        // Get current time and format
        function getTime() {
            let date = new Date(),
                min = date.getMinutes(),
                sec = date.getSeconds(),
                hour = date.getHours();

            return "" + 
                (hour < 10 ? ("0" + hour) : hour) + ":" + 
                (min < 10 ? ("0" + min) : min) + ":" + 
                (sec < 10 ? ("0" + sec) : sec);
        }
		//Get weather data
        window.onload = () => {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://free-api.heweather.net/s6/weather/now?location=auto_ip&key=faa1492a62a1470ba6a7e348dac6a045');
            xhr.onload = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        let json = JSON.parse(xhr.responseText);
                        console.log(json);
						document.getElementById("location").innerHTML = json.HeWeather6[0].basic.location;
                        document.getElementById("temp").innerHTML = json.HeWeather6[0].now.tmp + "摄氏度";
						document.getElementById("weather-description").innerHTML = json.HeWeather6[0].now.cond_txt;
                    } else {
                        console.log('error msg: ' + xhr.status);
                    }
                }
            }
            xhr.send();
            // Set up the clock
            document.getElementById("clock").innerHTML = getTime();
            // Set clock interval to tick clock
            setInterval( () => {
                document.getElementById("clock").innerHTML = getTime();
            },100);
        }
		//Search on Spacebar and Esc key event
        document.addEventListener("keydown", event => {
            if (event.keyCode == 32) {          // Spacebar code to open search
                document.getElementById('search').style.display = 'flex';
                document.getElementById('search-field').focus();
            } else if (event.keyCode == 27) {   // Esc to close search
                document.getElementById('search-field').value = '';
                document.getElementById('search-field').blur();
                document.getElementById('search').style.display = 'none';
            }
        });
    </script>
</body>
</html>